<template>
  <h3>cashier 收银台</h3>
  <f-button @click="handleOpenUseCashier()">打开收银台 useCashier</f-button>
  <f-button @click="handleOpenCashier()">打开收银台 组件</f-button>
  <f-cashier
    v-model:visible="cashierVisible"
    :sid="settlementId"
    @success="successCallback"
    @cancel="cancelCallback" />
  <hr />
  <f-button @click="handleOpenUseCashierRefund()">打开收银台(退款) useCashierRefund</f-button>
  <f-button @click="handleOpenCashierRefund()">打开收银台(退款) 组件</f-button>
  <f-cashier-refund
    v-model:visible="cashierRefundVisible"
    v-bind="cashierRefundBind"
    @success="successCallback"
    @cancel="cancelCallback" />
  <hr />
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { useCashier, useCashierRefund } from '../../packages';

//是否显示收费弹窗
const cashierVisible = ref(false);
const cashierRefundVisible = ref(false);
//结算单号
// const settlementId = ref('1855806201085595648');
const settlementId = ref('1878686102573199360');

const cashierRefundBind = ref({
  sid: '1856579043691667456',
  amount: 11,
  payMode: '1'
});

const handleOpenCashier = () => {
  cashierVisible.value = true;
};

const handleOpenCashierRefund = () => {
  cashierRefundVisible.value = true;
};

const appContext = getCurrentInstance().appContext;

const handleOpenUseCashierRefund = () => {
  useCashierRefund({
    sid: '1856579043691667456',
    amount: 11,
    payMode: '1',
    appContext: appContext,
    immediate: true,
    visitType: '11'
  });
};

const handleOpenUseCashier = () => {
  const { open: openCashier, close: openClose } = useCashier({
    // immediate: true,
    sid: settlementId.value,
    // payMode: '2',
    success: (e) => console.log('success', e),
    cancel: (e) => console.log('cancel', e)
  });
  openCashier({ sid: settlementId.value });
};

//成功回调
const successCallback = () => {
  cashierVisible.value = false;
  console.log('成功');
};
//取消回调
const cancelCallback = () => {
  cashierVisible.value = false;
  console.log('取消');
};
</script>

<style lang="scss"></style>
